<template>
  <div>
    <h1>甘特图组件</h1>
    <div class="container">
      <GanttChart :data="data" :editProcess="editProcess" :addItem="addItem" />
    </div>
  </div>
</template>

<script>
import GanttChart from '@/components/GanttChart'
import { statusDict } from '@/utils/GanttDicts'
import { getGanttData, addGanttData, editGanttData } from '@/utils/mockjs'
export default {
  taskName: 'Home',
  data() {
    return {
      // data: [
      //   {
      //     id: '0',
      //     taskName: '甘特图开发计划',
      //     startTime: '2022-08-01',
      //     endTime: '2024-01-14',
      //     totalTime: 532,
      //     personInCharges: ['等鱼'],
      //     parentId: '',
      //     rootId: '',
      //     grade: 0,
      //     actual_process: 0.6,
      //     children: [
      //       {
      //         id: 'c0',
      //         taskName: '甘特图开发计划c0',
      //         startTime: '2022-08-03',
      //         endTime: '2022-08-18',
      //         totalTime: 16,
      //         personInCharges: ['等鱼'],
      //         parentId: '0',
      //         rootId: '0',
      //         grade: 1,
      //         actual_process: 0.2,
      //         children: [
      //           {
      //             id: 'cc0',
      //             taskName: '甘特图开发计划c0',
      //             startTime: '2022-08-01',
      //             endTime: '2022-08-01',
      //             totalTime: 1,
      //             personInCharges: ['等鱼'],
      //             parentId: 'c0',
      //             rootId: '0',
      //             grade: 2,
      //             actual_process: 0.3,
      //             children: []
      //           },
      //         ]
      //       },
      //     ]
      //   }, {
      //     id: '1',
      //     taskName: '甘特图开发计划1',
      //     startTime: '2022-08-01',
      //     endTime: '2022-08-14',
      //     totalTime: 14,
      //     personInCharges: ['等鱼'],
      //     parentId: '',
      //     rootId: '',
      //     grade: 0,
      //     actual_process: 0.23,
      //     children: [
      //       {
      //         id: 'c1',
      //         taskName: '甘特图开发计划c1',
      //         startTime: '2022-08-01',
      //         endTime: '2022-09-21',
      //         totalTime: 52,
      //         personInCharges: ['等鱼'],
      //         parentId: '1',
      //         rootId: '1',
      //         grade: 1,
      //         actual_process: 0.3,
      //         children: [{
      //           id: 'cc1',
      //           taskName: '甘特图开发计划c1',
      //           startTime: '2022-08-01',
      //           endTime: '2022-09-21',
      //           totalTime: 52,
      //           personInCharges: ['等鱼'],
      //           parentId: '',
      //           rootId: '',
      //           grade: 2,
      //           actual_process: 0.5,
      //           children: []
      //         },
      //         ]
      //       },
      //     ]
      //   }, {
      //     id: '2',
      //     taskName: '甘特图开发计划2',
      //     startTime: '2022-08-05',
      //     endTime: '2023-05-21',
      //     totalTime: 290,
      //     personInCharges: ['等鱼', '金枪鱼', '罗非鱼', '等鱼', '金枪鱼', '罗非鱼', '等鱼', '金枪鱼', '罗非鱼'],
      //     parentId: '',
      //     rootId: '',
      //     grade: 0,
      //     actual_process: 0.45,
      //     children: [{
      //       id: 'c2',
      //       taskName: '甘特图开发计划c2',
      //       startTime: '2022-08-15',
      //       endTime: '2022-12-01',
      //       totalTime: 109,
      //       personInCharges: ['等鱼', '木鱼'],
      //       parentId: '2',
      //       rootId: '2',
      //       grade: 1,
      //       actual_process: 0.78,
      //       children: []
      //     },
      //     ]
      //   }, {
      //     id: '3',
      //     taskName: '甘特图开发计划3',
      //     startTime: '2022-09-01',
      //     endTime: '2022-10-05',
      //     totalTime: 35,
      //     personInCharges: ['等鱼', '魔鬼鱼'],
      //     parentId: '',
      //     rootId: '',
      //     grade: 0,
      //     actual_process: 0.66,
      //     children: [
      //       {
      //         id: 'c3',
      //         taskName: '甘特图开发计划c3',
      //         startTime: '2022-08-01',
      //         endTime: '2022-08-05',
      //         totalTime: 5,
      //         personInCharges: ['等鱼', '摸鱼'],
      //         parentId: '3',
      //         rootId: '3',
      //         grade: 1,
      //         actual_process: 0.22,
      //         children: []
      //       }
      //     ]
      //   },
      // ],
      id: '',
      data: [],
      // status: statusDict.NO
    }
  },
  components: {
    GanttChart
  },
  mounted() {
    this.id = this.$route.query.id
    this.getData();
  },
  methods: {
    async getData() {
      const { data } = await getGanttData(this.id);
      console.log(data);
      setTimeout(() => this.data = data.data, 1000)
      // setTimeout(() => this.data = [], 5000)
    },
    async addItem(item) {
      console.log(item);
      item.id = new Date().getTime();
      item.rootId = item.rootId;
      const { data } = await addGanttData(item);
      this.$message({ message: data.msg, type: 'success' });
      this.getData(this.id);
    },
    async editProcess(item, msg) {
      console.log(item);
      const { data } = await editGanttData(item);
      this.$message({ message: data.msg, type: 'success' });
      this.getData(this.id);
    }
  }
}
</script>

<style scoped>
</style>
